<template>
  <div class="echarList">
    <div class="title">待办提示</div>
    <div class="content">
      <div class="hint flex2" v-for="(item, index) in data">
        <div class="text flex7" >
          <div>{{ item.num  }}</div>
          <i class="iconfont icon-luyin"></i>
        </div>
        <div class="text text2">{{ item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
let data = reactive([
  {
    num: "10",
    title: "待审核签约申请",
  },
  {
    num: "30",
    title: "待审核服务申请",
  },
  {
    num: "7",
    title: "待完成服务",
  },
  {
    num: "107",
    title: "待回复消息",
  },
  {
    num: "23",
    title: "待处理续约",
  },
]);
</script>

<style scoped>
.echarList {
  width: 22%;
  height: 100%;
  padding: 0 20px;
  background-color: #fff;
  box-sizing: border-box;
}
.title {
  box-sizing: border-box;
  font-size: 20px;
 font-weight: 1000;
 height: 50px;
 line-height: 50px;

}
.hint {
  border-bottom: 1px solid #ccc;
}
.text {
  height: 32px;
  line-height: 32px;
}
.text2{color:#999999;font-size: 14px;}
.iconfont{color: #97c974;}
</style>
